<template>
  <div id="app"> 
    <SocketSlot>
      <template #head> 
        本周热搜 TOP5
      </template>
      <template #body>
        <div class="topic-container">
    <div class="topic-item">
      <span class="topic-name">#区块链</span>
      <div>
        <span class="topic-icon">🔥</span>
        <span class="topic-heat">96</span>
      </div>
    </div>
    <div class="topic-item">
      <span class="topic-name">#数据挖掘</span>
      <div>
        <span class="topic-icon">🔥</span>
        <span class="topic-heat">91</span>
      </div>
    </div>
    <div class="topic-item">
      <span class="topic-name">#无人机</span>
      <div>
        <span class="topic-icon">🔥</span>
        <span class="topic-heat">87</span>
      </div>
    </div>
    <div class="topic-item">
      <span class="topic-name">#生命科学</span>
      <div>
        <span class="topic-icon">🔥</span>
        <span class="topic-heat">72</span>
      </div>
    </div>
    <div class="topic-item">
      <span class="topic-name">#传感器</span>
      <div>
        <span class="topic-icon">🔥</span>
        <span class="topic-heat">60</span>
      </div>
    </div>
</div>
    
      </template>
    </SocketSlot>
    

    <SocketSlot>
      <template #head> 
        <div class="user-container">
          <p>可能感兴趣的人</p>
          <p>换一批</p>
        </div>
      </template>

      <template #body>
        <div class="card-container">
    <div class="teacher-card">
        <div class="name">
        <div class="card-header">李国盛</div>
        <div class="card-info">年龄：52岁</div>
        </div>
        <div class="card-info">性别：男</div>
        <div class="card-info">研究领域：机电一体化技术</div>
        <div class="card-info">职称：教授</div>
        <div class="card-info">所在院校：哈尔滨工业大学</div>
    </div>
    <div class="teacher-card">
        <div class="card-header">陈颖</div>
        <div class="card-info">年龄：36岁</div>
        <div class="card-info">性别：女</div>
        <div class="card-info">研究领域：人工智能</div>
        <div class="card-info">职称：副教授</div>
        <div class="card-info">所在院校：清华大学</div>
    </div>
</div>
      </template>
    </SocketSlot>

  </div>

</template>

<script>
  import SocketSlot from './components/SocketSlot';
export default { 
  data () {
    return {
      
    }
  },
  components: {
    SocketSlot
  }
}
</script>

<style>
    .topic-container {
        width: 300px;
        margin: auto;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .topic-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        justify-content: space-between;
    }
    .topic-icon {
        color: #ff4500;
        margin-right: 10px;
    }
    .topic-name {
        font-weight: bold;
        margin-right: 10px;
    }
    .topic-heat {
        font-size: 1.2em;
    }

    .user-container {
      width: 300px;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
    }

    .card-container {
      width: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin: auto;
    }
    .teacher-card {
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
    }
    .card-header {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .card-info {
        margin-bottom: 5px;
    }

    .name {
      display: flex;
    }
</style>